<template>
  <div id="login">
    <div id="content">
      <div class="loginLeft">
        <div class="login-time">欢迎使用</div>
        <span>
          <img src="../assets/img/zxwy.jpg" />
          <p>智学无忧商城后台登录</p>
        </span>
      </div>
      <!-- 登录 -->
      <div class="loginRight">
        <div class="login-right">
          <h4 class="login-title">登 录</h4>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="account">
              <div class="login-img">
                <i class="el-icon-user"></i>
              </div>
              <el-input v-model.number="ruleForm.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <div class="login-img">
                <i class="el-icon-key"></i>
              </div>
              <!-- 密码 -->
              <el-input
                placeholder="请输入密码"
                show-password
                v-model="ruleForm.pass"
                type="password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="verification" class="el-icon-position">
              <div class="login-img">
                <i class="el-icon-position"></i>
              </div>
              <!-- 验证码 -->
              <el-input v-model.number="ruleForm.verification" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <div class="el-checkbox" style="margin-left: 63px;">
              <el-checkbox :checked="ischecked" @click.native="remember()">记住密码</el-checkbox>
            </div>
            <el-form-item>
              <div class="logins" @click="submitForm()">
                <span>登录</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// api
import login from "./../api/login.js"
// Cookie
import cookie from "js-cookie";
// BASE64
import Base from "../Base/Base64.js";
export default {
  data() {
    //   账号
    var checkAge = (rule, value, callback) => {
      if (!value.trim()) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    //密码
    var validatePass = (rule, value, callback) => {
      if (value.trim() === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    //验证码
    var message = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        account: "",
        verification: "666666"
      },
      rules: {
        pass: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        account: [
          {
            validator: checkAge,
            trigger: "blur"
          }
        ],
        verification: [
          {
            validator: message,
            trigger: "blur"
          }
        ]
      },
      ischecked: false
    };
  },
  methods: {
    submitForm() {
      let _this = this;
      //获取后台数据
        login.login({
            "username":_this.ruleForm.account,
            "password":_this.ruleForm.pass,
            "verifyCode":_this.ruleForm.verification
        }).then(function(res) {
          if (res.data.errmsg == "成功") {
            cookie.set("token", res.data.data);

          login.info().then((res)=>{
            console.log(res);           
            cookie.set("perms", res.data.data.perms);
          })
             _this.$router.push("/Home/Directory"); //跳转首页   
              _this.$information.success("登录成功") 
          } else {
            _this.$information.error("登录失败") 
          }
        });
    },
    //记住密码
  remember(){
    this.ischecked=true
    if (this.ischecked==true) {
      cookie.set("username", Base.encode(this.ruleForm.account)); //账号
      cookie.set("password", Base.encode(this.ruleForm.pass)); //密码
      cookie.set("verifica", this.ruleForm.verification); //验证码
    }else{
      // 清除加密
      cookie.remove("username")
      cookie.remove("password")
    }       
  },
  },
  // //解密
  created() {
    if (cookie.get("username")) {
      this.ischecked = true
      this.ruleForm.account= Base.decode(cookie.get("username")); //解密账号
      this.ruleForm.pass=Base.decode(cookie.get("password")); //解密密码
    }
  }
};
</script>

<style scoped lang='less'>
#login {
  width: 100%;
  height: 100vh;
  background: url("../assets/img/cloud.jpg") 0px 0px no-repeat;
  background-size: 100% 100%;
  display: flex;
}
// @media screen and (max-width: 1366px) and (min-width: 400px) {
  #content {
    width: 75%;
    height: 80%;
    margin: auto;
    align-self: center;
    box-shadow: 0px 0px 10px 1px slategrey;
    display: flex;
  }
  .loginLeft {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    justify-content: center;
    flex-direction: column;
    background-color: #409eff;
    color: #fff;
    float: left;
    width: 50%;
    position: relative;
    display: flex;
  }
  .loginLeft img {
    width: 100px;
    height: 100px;
    line-height: 100px;
    padding-left: 80px;
    text-align: center;
  }
  .loginLeft p {
    margin-top: 60px;
    text-align: center;
    color: #fff;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 25px;
  }

  .loginLeft span {
    align-self: center;
    margin: auto;
  }
  .loginLeft .login-time {
    position: absolute;
    left: 25px;
    top: 25px;
    width: 100%;
    color: #fff;
    font-weight: 200;
    opacity: 0.9;
    font-size: 18px;
    overflow: hidden;
  }
  // 右
  .loginRight {
    width: 50%;
    height: 100%;
    background: #ffffff;
    border-radius: 0px 8px 8px 0px;
  }
  .login-right {
    width: 80%;
    margin: auto;
  }
  .loginRight .login-title {
    color: #333;
    margin-bottom: 40px;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
    letter-spacing: 4px;
    margin-top: 40px;
  }
  .el-form-item/deep/input {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #333;
    border-bottom: 1px solid #ebedf2;
    display: inline;
  }
  .el-form-item {
    position: relative;
  }
  .el-form-item/deep/i {
    display: inline;
  }
  .login-img {
    position: absolute;
    top: 2px;
    left: -42px;
  }

  .el-checkbox {
    width: 300px;
    margin: 20px 0px 30px 0px;
  }
  .logins {
    width: 100%;
    height: 45px;
    border: 1px solid #409eff;
    background: none;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 300;
    color: #409eff;
    cursor: pointer;
    font-family: "neo";
    transition: 0.25s;
    display: flex;
    margin-left: 0px;
  }
  .logins span {
    margin: auto;
  }
// }
</style>
